﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:vtex="http://www.vtex.com.br/2009/vtex-common" xmlns:vtex.cmc="http://www.vtex.com.br/2009/vtex-commerce">
<head>
<link rel="stylesheet" type="text/css" href="/Control/ArquivoExibir.aspx?NomeArquivo=reset.css" media="all" />
<script type="text/javascript" src="/Control/ArquivoExibir.aspx?NomeArquivo=cufon-yui.js"></script>
<script type="text/javascript" src="/Control/ArquivoExibir.aspx?NomeArquivo=Proxima_Nova_Rg_700.font.js"></script>
<script type="text/javascript" src="/Control/ArquivoExibir.aspx?NomeArquivo=jQ-Commerce.js"></script>
<script type="text/javascript" src="/Control/ArquivoExibir.aspx?NomeArquivo=quick-look.js"></script>
<script type="text/javascript">
	$(function () {
		Cufon.replace('#productName,.about-look ul li .look-information .name', {
			fontFamily: 'Proxima Nova Rg'
		});
		$('#look-list').VerticalSlide({},11);
	});
</script>
<!--[if lte IE 6]>
	<script type="text/javascript" src="/Control/ArquivoExibir.aspx?NomeArquivo=DD_belatedPNG_0.0.8a-min.js"></script>
	<script type="text/javascript">
		DD_belatedPNG.fix('img,div,a,input,span');
	</script>
<![endif]-->
<style type="text/css">
#ajaxBusy { position:absolute; top: 0;  left: 0; width: 1px; height: 1px; text-indent: -9999px; }
#productQuickView { background: #e6e6e6; overflow: hidden; }
#quickcontent { padding: 11px; background: #fff; }
#productImages { float: left; width: 109px; height: 109px; margin-right: 11px; } 
#productImages .thumbs { display: none;  } 
#productImages img { width: 109px !important; height: 109px !important; } 
#productName { font-size: 12px; font-weight: bold; text-transform: uppercase; color: #000; }
#productSelection { margin-top: 11px; font-size: 11px; }
#productSelection em { font-style: normal; color: #fff; font-size: 1px; }
#productSelection em strong { font-size: 11px; color: #999;  }
#productSelection .valor-por {  }
#productSelection .valor-de { display: none; height: 0; width: 0; overflow: hidden; visibility: hidden; }
#productSelection .valor-dividido { display: none; height: 0; width: 0; overflow: hidden; visibility: hidden; }
#productSelection .economia-de { display: none; height: 0; width: 0; overflow: hidden; visibility: hidden; }
#quickfooter { padding: 11px; text-align: center; background: #e6e6e6; }
#productBuy .buy-button { display: block; margin: 0 auto; width: 137px; height: 34px; text-indent: -9999px; margin-bottom: 10px; background: url("/Control/ArquivoExibir.aspx?NomeArquivo=img_product_buybutton.png") no-repeat scroll 0 0 transparent; }
#quickfooter select { display: none; }
#quickfooter .jQcustomselect { position: relative; width: 100%; height: 22px; margin-bottom: 10px; background: url("/Control/ArquivoExibir.aspx?NomeArquivo=img_product_opendescription.png") no-repeat scroll right center #1f1f1f; }
#quickfooter .specification { display: none; }
#quickfooter .jQcustomselect a { text-decoration: none; }
#quickfooter .jQcustomselect .jqselectlabel { display: block; width: 100%px; height: 20px; padding: 1px 10px 2px; overflow: hidden; line-height: 20px; color: #fff; font-weight: bold; }
#quickfooter .jQcustomselect .jQSelect { position: absolute; z-index: 5; top: 17px; left: 0; width: 100%; display: none; }
#quickfooter .jQcustomselect .jQSelect li { color: #fff; background: #1f1f1f; cursor: pointer; display: block; padding: 2px 10px; border-bottom: 1px solid #333; }
#quickfooter .jQcustomselect .jQSelect li:hover { background: #fff; color: #1f1f1f; border-bottom: #1f1f1f; }

.about-look { position: relative; padding: 11px; }
.about-look .topcontrols { overflow:hidden; }
.about-look .topcontrols .controlup { display: block; width: 109px; float:left; height: 32px; text-indent: -9999px; background: url("/Control/ArquivoExibir.aspx?NomeArquivo=img_look_arrowup.png") 0 0 no-repeat; }
.about-look .bottomcontrols { margin-top: 11px; overflow:hidden }
.about-look .bottomcontrols .controldown { display: block; float: left; width: 109px; height: 32px; text-indent: -9999px; background: url("/Control/ArquivoExibir.aspx?NomeArquivo=img_look_arrowdown.png") 0 0 no-repeat;  }
.about-look .topcontrols .controlbuy { background: #1f1f1f url("/Control/ArquivoExibir.aspx?NomeArquivo=img_navigation_arrow_hover.png") no-repeat 15px center; color:#FFF; display: block; float: right; font-weight: bold; padding:11px 20px; padding-left:30px; }
.about-look .topcontrols .controlbuy:hover{background:#666 url("/Control/ArquivoExibir.aspx?NomeArquivo=img_navigation_arrow_hover.png") no-repeat 15px center; text-decoration:none;}

.about-look #looklist-wrapper { position: relative; overflow: hidden; height: 361px; }
.about-look #look-list { position: absolute; top: 0; left: 0; }
.about-look ul {  }
.about-look ul li { display: block; height: 109px; margin-top: 11px; }
.about-look ul li .thumbnail { float: left; width: 109px; height: 109px; }
.about-look ul li .thumbnail img { width: 109px; height: 109px; }
.about-look ul li .look-information { float: right; width: 327px; height: 87px; padding: 11px; background: #e6e6e6; }
.about-look ul li .look-information .name { height: 30px; font-size: 14px; color: #000; text-transform: uppercase; }
.about-look ul li .look-information .sizes { float: left; width: 146px; height: 22px }
.about-look ul li .look-information .sizes .specification { display: block; padding: 6px 6px 0; height: 18px; margin: 0 0 5px; color: #fff; background: #000; }
.about-look ul li .look-information .sizes .skuList {  }

.about-look ul li .look-information .sizes select { display: none; }
.about-look ul li .look-information .sizes .jQcustomselect { position: relative; width: 146px; height: 22px; margin: 0 0 7px; background: url("/Control/ArquivoExibir.aspx?NomeArquivo=img_product_opendescription.png") no-repeat scroll right center #1f1f1f; }
.about-look ul li .look-information .sizes .specification { display: none; }
.about-look ul li .look-information .sizes .jQcustomselect a { text-decoration: none; }
.about-look ul li .look-information .sizes .jQcustomselect .jqselectlabel { display: block; width: 126px; height: 20px; padding: 1px 10px 2px; overflow: hidden; line-height: 20px; color: #fff; font-weight: bold; }
.about-look ul li .look-information .sizes .jQcustomselect .jQSelect { position: absolute; z-index: 5; top: 22px; left: 0; width: 146px; display: none; }
.about-look ul li .look-information .sizes .jQcustomselect .jQSelect li { color: #fff; background: #1f1f1f; cursor: pointer; display: block; padding: 2px 10px; border-bottom: 1px solid #333; }
.about-look ul li .look-information .sizes .jQcustomselect .jQSelect li:hover { background: #fff; color: #1f1f1f; border-bottom: #1f1f1f; }


.about-look ul li .look-information .price { float: right; padding: 5px 6px 0; margin-left: 11px; height: 17px; color: #fff; font-weight: bold; background: #999; width:105px; }
.about-look ul li .look-information .price .valor-de { display: none; }
.about-look ul li .look-information .price .valor-dividido { position: relative; top: 18px;  left: 6px; float: right; padding: 5px 6px 0; margin-left: 11px; height: 17px; color: #fff; font-weight: bold; background: #666; width:105px; }
.about-look ul li .look-information .price em { font-style: normal; }
.about-look ul li .look-information .price .preco-a-vista { display: none; }

.about-look ul li .look-information .buy { display: none; clear: both; padding-top: 10px; }
.about-look ul li .look-information .buy input { width: 0; height: 0; visibility: hidden; }
.about-look ul li .look-information .buy .buy-in-page-quantity { display: none; }
.about-look ul li .look-information .buy .buy-in-page-button { display: block; width: 97px; height: 24px; text-indent: -9999px; background: url("/Control/ArquivoExibir.aspx?NomeArquivo=img_look_buybutton.png") 0 0 no-repeat; }
.about-look ul li .look-information .buy .unavailable-button{ font-weight:bold; }

.about-look ul ul { height: auto; }
.about-look ul ul li { height: auto; margin: 0; }

</style>
<title></title>
</head>
<body id="productQuickView">  <!-- o body precisa ser definifo com este ID -->
    <div id="produto">
<div class="about-look clearfix">
					<div class="topcontrols">
						<a href="javascript:void(0)" class="button controlup">Subir</a>
						<a href="javascript:void(0)" class="controlbuy" onclick="BuyAllItemsSelected(1);">Comprar todos</a>
					</div>
					<div id="looklist-wrapper">
						<ul id="look-list">
							<li>
								<div class="thumbnail">
								<vtex.cmc:ProductImage productIndex="1" />
								</div>
								<div class="look-information">
									<h3 class="name"><vtex.cmc:productName productIndex="1" /></h3>
									<div class="sizes">
										<vtex.cmc:skuRichSelectionJonas changeImage="1"  productIndex="1" />
									</div>
									<div class="price">
										<vtex.cmc:skuPrice productIndex="1" />
									</div>
									<div class="buy">
										<vtex.cmc:BuyInPage productIndex="1"/>
									</div>
								</div>
							</li>
							<li>
								<div class="thumbnail">
								<vtex.cmc:ProductImage productIndex="2" />
								</div>
								<div class="look-information">
									<h3 class="name"><vtex.cmc:productName productIndex="2" /></h3>
									<div class="sizes">
										<vtex.cmc:skuRichSelectionJonas changeImage="2"  productIndex="2" />
									</div>
									<div class="price">
										<vtex.cmc:skuPrice productIndex="2" />
									</div>
									<div class="buy">
										<vtex.cmc:BuyInPage productIndex="2"/>
									</div>
								</div>
							</li>
							<li>
								<div class="thumbnail">
								<vtex.cmc:ProductImage productIndex="3" />
								</div>
								<div class="look-information">
									<h3 class="name"><vtex.cmc:productName productIndex="3" /></h3>
									<div class="sizes">
										<vtex.cmc:skuRichSelectionJonas changeImage="3"  productIndex="3" />
									</div>
									<div class="price">
										<vtex.cmc:skuPrice productIndex="3" />
									</div>
									<div class="buy">
										<vtex.cmc:BuyInPage productIndex="3"/>
									</div>
								</div>
							</li>
							<li>
								<div class="thumbnail">
								<vtex.cmc:ProductImage productIndex="4" />
								</div>
								<div class="look-information">
									<h3 class="name"><vtex.cmc:productName productIndex="4" /></h3>
									<div class="sizes">
										<vtex.cmc:skuRichSelectionJonas changeImage="4"  productIndex="4" />
									</div>
									<div class="price">
										<vtex.cmc:skuPrice productIndex="4" />
									</div>
									<div class="buy">
										<vtex.cmc:BuyInPage productIndex="4"/>
									</div>
								</div>
							</li>
							<li>
								<div class="thumbnail">
								<vtex.cmc:ProductImage productIndex="5" />
								</div>
								<div class="look-information">
									<h3 class="name"><vtex.cmc:productName productIndex="5" /></h3>
									<div class="sizes">
										<vtex.cmc:skuRichSelectionJonas changeImage="5"  productIndex="5" />
									</div>
									<div class="price">
										<vtex.cmc:skuPrice productIndex="5" />
									</div>
									<div class="buy">
										<vtex.cmc:BuyInPage productIndex="5"/>
									</div>
								</div>
							</li>
							<li>
								<div class="thumbnail">
								<vtex.cmc:ProductImage productIndex="6" />
								</div>
								<div class="look-information">
									<h3 class="name"><vtex.cmc:productName productIndex="6" /></h3>
									<div class="sizes">
										<vtex.cmc:skuRichSelectionJonas changeImage="6"  productIndex="6" />
									</div>
									<div class="price">
										<vtex.cmc:skuPrice productIndex="6" />
									</div>
									<div class="buy">
										<vtex.cmc:BuyInPage productIndex="6"/>
									</div>
								</div>
							</li>
							<li>
								<div class="thumbnail">
								<vtex.cmc:ProductImage productIndex="7" />
								</div>
								<div class="look-information">
									<h3 class="name"><vtex.cmc:productName productIndex="7" /></h3>
									<div class="sizes">
										<vtex.cmc:skuRichSelectionJonas changeImage="7"  productIndex="7" />
									</div>
									<div class="price">
										<vtex.cmc:skuPrice productIndex="7" />
									</div>
									<div class="buy">
										<vtex.cmc:BuyInPage productIndex="7"/>
									</div>
								</div>
							</li>
							<li>
								<div class="thumbnail">
								<vtex.cmc:ProductImage productIndex="8" />
								</div>
								<div class="look-information">
									<h3 class="name"><vtex.cmc:productName productIndex="8" /></h3>
									<div class="sizes">
										<vtex.cmc:skuRichSelectionJonas changeImage="8"  productIndex="8" />
									</div>
									<div class="price">
										<vtex.cmc:skuPrice productIndex="8" />
									</div>
									<div class="buy">
										<vtex.cmc:BuyInPage productIndex="8"/>
									</div>
								</div>
							</li>
							<li>
								<div class="thumbnail">
								<vtex.cmc:ProductImage productIndex="9" />
								</div>
								<div class="look-information">
									<h3 class="name"><vtex.cmc:productName productIndex="9" /></h3>
									<div class="sizes">
										<vtex.cmc:skuRichSelectionJonas changeImage="9"  productIndex="9" />
									</div>
									<div class="price">
										<vtex.cmc:skuPrice productIndex="9" />
									</div>
									<div class="buy">
										<vtex.cmc:BuyInPage productIndex="9"/>
									</div>
								</div>
							</li>
							<li>
								<div class="thumbnail">
								<vtex.cmc:ProductImage productIndex="10" />
								</div>
								<div class="look-information">
									<h3 class="name"><vtex.cmc:productName productIndex="10" /></h3>
									<div class="sizes">
										<vtex.cmc:skuRichSelectionJonas changeImage="10"  productIndex="10" />
									</div>
									<div class="price">
										<vtex.cmc:skuPrice productIndex="10" />
									</div>
									<div class="buy">
										<vtex.cmc:BuyInPage productIndex="10"/>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="bottomcontrols">
						<a href="javascript:void(0)" class="button controldown">Descer</a>
					</div>
				</div>        
    </div>
   <vtex.cmc:productQuickView/> <!-- a chamada desse controle carrega todos os JS utilizados pela funcionalidade -->
</body>
</html>